<template>
  <div class="app-main-container">
    <div class="app-main-content">
      <transition mode="out-in" name="fade-transform">
        <keep-alive :include="cachedRoutes" :max="keepAliveMaxNum">
          <router-view :key="$route.fullPath" />
        </keep-alive>
      </transition>
    </div>
    <vab-footer />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { keepAliveMaxNum } from '@/config'

  export default {
    name: 'AppMain',
    data() {
      return {
        keepAliveMaxNum,
        refreshRoutePath: '', //被刷新的路由
      }
    },
    computed: {
      ...mapGetters({
        visitedRoutes: 'tabsBar/visitedRoutes',
      }),
      cachedRoutes() {
        console.log([
          ...new Set(
            this.visitedRoutes
              .filter((item) => !item.meta.noKeepAlive)
              .filter((item) => item.path != this.refreshRoutePath)
              .flatMap((item) => item.matched)
          ),
        ])
        return [
          ...new Set(
            this.visitedRoutes
              .filter((item) => !item.meta.noKeepAlive)
              .filter((item) => item.path != this.refreshRoutePath)
              .flatMap((item) => item.matched)
          ),
        ]
      },
    },
    created() {
      // 重载当前路由
      this.$baseEventBus.$on('reload-router-view', (route) => {
        this.refreshRoutePath = route.path
        this.$nextTick(() => {
          this.$router
            .replace({
              path: '/redirect' + route.path,
            })
            .then(() => {
              this.refreshRoutePath = ''
            })
        })
      })
    },
  }
</script>
